<!doctype html>
<html>
<head>
	<title>Autosizing Items to Available Space</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">

	<script src="../../common/testdata.js"></script>
<body>
	<style type="text/css">
		#dataA, #dataB{
			margin:20px;
		}
	</style>
	<div id="dataA" style='width:600px; height:300px;'></div>
	<hr>
	<div id="dataB" style='width:600px; height:300px;'></div>
	
	<script>
		webix.ui({
			view:"dataview",
			container:"dataA",
			data:big_film_set,

			type:{
				template:"<div class='webix_strong'>#title#</div> Year: #year#, rank: #rank#",
				width:"auto", 
				height:"auto"
			},
			xCount:2, yCount:4
		});

		webix.ui({
			view:"dataview",
			container:"dataB",
			data:big_film_set,
			
			type:{
				template:"<div class='webix_strong'>#title#</div> Year: #year#, rank: #rank#",
				width:"auto", 
				height:"auto"
			},
			xCount:4, yCount:2
		});
	</script>


</body>
</html>
